<template>
  <div>
      <ul class="oul">
        <li v-for="item in list"
            @click="pushDetail(item.id, item.title)"
            :key="item.id">
          {{ item.title }}
        </li>
      </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    // 请求接口对List赋值
    axios.get('/getList').then(res => {
      this.list = res.data
    })
  },
  methods: {
    pushDetail(id, title) {
      // this.$router.push('/detail?id=' + id)
      // 路由传参(推荐)
      this.$router.push({
        path: "/detail",
        // url可见(query)
        query: {
          id,
          // title
        }
      })
    }
  }
}
</script>

<style scoped>
.oul li {
  line-height: 60px;
}
</style>